<template>
  <div class="overflow-auto" style="height: 100vh;overflow-y: scroll; background-color: #333333;">
    <div class="masonry">

      <el-card style="max-width: 480px;margin-bottom: 30px;" v-for="(item, index) in dockerlist" :key="item.id">
        <template #header>
          <div class="card-header" style="position: relative;">
            <el-alert :title="item.name" type="info" :description="item.Labels['org.opencontainers.image.description']"
              :closable="false" style="color:#000"/>
            <div class="absolute top-0 right-0">
              <el-tag size="small" v-if="item.State === 'running'">{{ item.State }} {{ item.Status
                }}</el-tag>
              <el-tag size="small" v-else-if="item.State === 'exited'" type="danger">{{ item.State }} {{ item.Status
                }}</el-tag>
              <el-tag size="small" v-else-if="item.State === 'paused'" type="warning">{{ item.State }} {{ item.Status
                }}</el-tag>
            </div>
          </div>
        </template>


        <aside class="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono mt-2">
          <div class="flex justify-between items-center">
            <div class="flex space-x-2 text-red-500">

            </div>
            <p class="text-sm">docker</p>
          </div>
          <div class="mt-4">
            <p style="word-break:break-all" class="max-w-xs overflow-ellipsis">★ {{ item.Image }}</p>
            <p style="word-break:break-all" class="text-yellow-400"
              v-if="item.Labels['com.docker.compose.project.config_files']">◎ {{
                item.Labels['com.docker.compose.project.config_files'] }}
            </p>
            <p style="word-break:break-all" class="mt-2 text-green-400" v-if="item.Command" v-html="item.command"></p>
            <p style="word-break:break-all;cursor: pointer;" class="mt-2 text-blue-400"
              v-for="(item2, index) in item.Ports" :key="index" @click="tz(item2.PublicPort)">
              <span v-if="item2.IP != undefined && item2.PublicPort != undefined && item2.IP != '::'">
                ✉&nbsp;&nbsp;{{ item2.Type + '&nbsp;➜&nbsp;' + item2.IP + ':' + item2.PublicPort }}</span>
            </p>
            
          </div>
          
        </aside>
        <p v-if="item.name === 'rainloop'">UDUQREHMCEOSOQPN</p>
        <template #footer>
          <el-button-group class="ml-4 float-right">
            <el-button type="primary" @click="startdocker(item)">
              <svg t="1714663977448" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6516" width="20" height="20">
                <path
                  d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m-97.344 662.272V297.728l311.616 190.464-311.616 238.08z"
                  fill="#e6e6e6" p-id="6517"></path>
              </svg>
            </el-button>
            <el-button type="primary" @click="resetdocker(item)">
              <svg t="1714907001606" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7147" width="20" height="20">
                <path
                  d="M511.726933 0.000341C228.949428 0.153941-0.170496 229.512798 0.000171 512.273237 0.153771 795.050743 229.512627 1024.170667 512.273067 1024 795.050572 1023.8464 1024.170496 794.487543 1023.999829 511.727104A511.726763 511.726763 0 0 0 511.726933 0.000341z m-327.338557 511.726763a36.983454 36.983454 0 0 1 38.092787-36.710388h92.893836a36.710388 36.710388 0 1 1 0 73.420776h-92.893836a36.710388 36.710388 0 0 1-38.092787-36.710388z m201.352466 158.515147l-65.911445 65.911445a36.983454 36.983454 0 0 1-62.856512-25.855991 38.092787 38.092787 0 0 1 10.854396-26.146125l65.911445-65.911445a36.778654 36.778654 0 0 1 52.002116 52.002116z m29.18399-256.136448a36.710388 36.710388 0 0 1-51.985049 0l-65.638378-65.638378a36.983454 36.983454 0 0 1 26.146125-62.856512c9.727997 0 19.046394 3.908265 25.855991 10.854396l65.638378 65.075178a36.983454 36.983454 0 0 1 0 52.565316z m135.458089 373.776942a37.273588 37.273588 0 0 1-37.000521 36.983455 36.983454 36.983454 0 0 1-36.693322-36.983455V695.29611c0-20.309327 16.383995-36.846921 36.693322-37.000521a37.273588 37.273588 0 0 1 37.000521 37.000521v92.603702z m0-459.434513a37.273588 37.273588 0 0 1-37.000521 36.983454 36.983454 36.983454 0 0 1-36.693322-36.983454v-92.893836c0-20.309327 16.383995-36.829854 36.693322-36.983454a37.546654 37.546654 0 0 1 37.000521 36.983454v92.893836z m63.965845 15.854928l65.621311-66.184511a36.710388 36.710388 0 0 1 52.019183 51.711982l-64.511978 66.747711a37.546654 37.546654 0 0 1-52.29225 0c-6.843731-6.963198-10.649596-16.383995-10.58133-26.129057a36.437321 36.437321 0 0 1 9.727997-26.146125z m122.077826 397.977467a37.546654 37.546654 0 0 1-52.275183 0l-65.365311-65.911444a36.147188 36.147188 0 0 1 0-51.72905 36.710388 36.710388 0 0 1 25.873058-10.854396 35.874121 35.874121 0 0 1 25.855991 10.854396l65.911445 65.621312a36.983454 36.983454 0 0 1 0 52.019182z m66.474644-194.679402h-92.893835a36.710388 36.710388 0 1 1 0-73.420775h92.893835a36.710388 36.710388 0 1 1 0 73.420775z"
                  fill="#e6e6e6" p-id="7148"></path>
              </svg>
            </el-button>
            <el-button type="primary" @click="stopdocker(item)">
              <svg t="1714664306922" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10443" width="20" height="20">
                <path
                  d="M512 938.688A426.688 426.688 0 1 1 512 85.376a426.688 426.688 0 0 1 0 853.312zM384 384v256h256V384H384z"
                  fill="#e6e6e6" p-id="10444"></path>
              </svg>
            </el-button>
            <!-- <el-button type="primary" @click="logsdocker(item)">
              <svg t="1714664306922" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10443" width="20" height="20">
                <path
                  d="M512 938.688A426.688 426.688 0 1 1 512 85.376a426.688 426.688 0 0 1 0 853.312zM384 384v256h256V384H384z"
                  fill="#e6e6e6" p-id="10444"></path>
              </svg>
            </el-button> -->
          </el-button-group>
          <div style="clear:both"></div>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import ax from '@/helper/axios.js'
import { ElMessage } from 'element-plus'
const dockerlist = ref([])
async function docker(command, success, failed) {

  var version = await ax.get(`/docker/version`);
  console.log('version', version)
  dockerlist.value = await ax.get(`/docker/containers/json?all=true`);
  for (var i = 0; i < dockerlist.value.length; i++) {
    dockerlist.value[i].name = dockerlist.value[i].Names[0].replace(/\//g, "");
    dockerlist.value[i].command = dockerlist.value[i].Command.replace(/-/g, "<br>-");
  }

  console.log('dockerlist.value', dockerlist.value)
}
function tz(port) {
  window.open('http://119.45.240.39:' + port, '_blank');
}
async function startdocker(item) {

  var r = await ax.post(`/docker/containers/${item.Id}/start`);
  console.log('r', r)
  docker();
}
async function stopdocker(item) {

  var r = await ax.post(`/docker/containers/${item.Id}/stop`);
  console.log('r', r)
  docker();
}
async function logsdocker(item) {

  var r = await ax.stream(`/docker/containers/${item.Id}/logs?follow=true`).then(response => {
    //const stream = response.data;
    console.log('stream', response)
  })
    .catch(error => {
      ElMessage.error('获取日志流失败');
      console.error('Error fetching log stream:', error);
    });
  console.log('logs', r)
  docker();
}
async function resetdocker(item) {

  var r = await ax.post(`/docker/containers/${item.Id}/restart`);
  console.log('r', r)
  docker();
}
docker();
</script>
<style>
.el-alert__title {
 
  font-weight: 800;
}

.el-alert__description {
  font-size: 10px !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 控制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
<style scoped lang="less">
.masonry {
  column-gap: 30px;
  width: 90%;
  margin: 20px auto;
  columns: 4;

  .item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;
  }

  h2 {
    padding: 8px 0;
  }
}

@media screen and (width >=1024px) and (width <=1439.98px) {
  .masonry {
    column-gap: 20px;
    width: 90vw;
    columns: 3;
  }
}

@media screen and (width >=768px) and (width <=1023.98px) {
  .masonry {
    column-gap: 20px;
    width: 96vw;
    columns: 2;
  }
}

@media screen and (width <=767.98px) {
  .masonry {
    width: 96vw;
    columns: 1;
  }
}
</style>
